<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3-svg-transform</title>
    <script src="./js/d3.min.js"></script>
</head>

<body>
    <svg width="300" height="300">
        <!--
            Translate - 它有两个选项， tx沿x轴平移， ty沿y轴平移。 例如 - 翻译（30 30）。
            Rotate - 它有三个选项， angle指旋转角度， cx和cy指的是x和y轴旋转的中心。 如果未指定cx和cy ，则默认为坐标系的当前原点。 例如 - 旋转（60）。
            Scale - 它有两个选项， sx沿x轴的比例因子， sy沿y轴的比例因子。 这里， sy是可选的，如果没有指定，则它取sx的值。 例如 - 比例（10）。
            Skew (SkewX and SkewY) - 只需一个选项; skew-angle指的是SkewX沿x轴的角度和SkewY沿y轴的角度。 例如 - skewx（20）。
        -->
        <rect x="20" y="20" width="60" height="60" fill="green" transform="translate(30 30) rotate(45)">
        </rect>
    </svg>

    <svg width="300" height="300">
        <g transform="translate(60,60) rotate(30)">
            <rect x="20" y="20" width="60" height="30" fill="green">
            </rect>
            <circle cx="0" cy="0" r="30" fill="red" />
        </g>
    </svg>
    
    <div id="svgcontainer">
    </div>
</body>
<script>
    var width = 300;
    var height = 300;
    var svg = d3.select("#svgcontainer")
        .append("svg")
        .attr("width", width)
        .attr("height", height);
    var group = svg.append("g").attr("transform", "translate(60, 60) rotate(30)");
    var rect = group
        .append("rect")
        .attr("x", 20)
        .attr("y", 20)
        .attr("width", 60)
        .attr("height", 30)
        .attr("fill", "green")
    var circle = group
        .append("circle")
        .attr("cx", 0)
        .attr("cy", 0)
        .attr("r", 30)
        .attr("fill", "red")
</script>

</html>